<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>工具箱</title>
    <meta name="description" content="工具箱">
    <meta name="keywords" content="工具箱">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">

    <style type="text/css">
        @import url("../plugins/element-ui/lib/theme-chalk/index.css");

        /*输入框底部黄色背景去除*/
        input:-webkit-autofill,
        textarea:-webkit-autofill,
        select:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 1000px white inset;
        }

        input[type=text]:focus, input[type=password]:focus, textarea:focus {
            -webkit-box-shadow: 0 0 0 1000px white inset;
        }

        a:link {
            color: black; /*未访问的链接颜色*/
        }

        a:visited {
            color: black; /*已访问的链接颜色*/
            /*background: red;*/
        }

        a:hover {
            color: black; /*鼠标移动到链接的颜色*/
            text-decoration: underline;
        }

        a:active {
            color: black; /*鼠标点击时的颜色*/
        }

        a {
            text-decoration: none; /*去掉下划线*/
        }
        .el-menu-item-group__title{
            display:none;
            visibility:hidden;
        }

    </style>
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div id="app">
    <el-container>
        <el-header class="main-header" style="background: #115c7b;height: 45px">
            <nav class="navbar navbar-static-top" :class=''>
                <!-- Logo -->
                <a href="../pages/main.html" class="logo" style="text-align:center;">
                    <span class="logo-lg" style="margin-left: -200px;">
                        <img style=" position: absolute; z-index: 9999; top: -1px;margin-left: -130px;"
                             src="https://img.icons8.com/officel/48/000000/toolbox.png"/>
                        <b style="color: white;position: absolute; font-size: 30px; top: 8px; font-family: fangsong;
                            margin-left: -55px;">工具箱
                        </b>
                    </span>
                    <a href="../pages/main.html" style="color: white;position: absolute;font-size: 25px;top: 8px;
                            margin-left: 500px;">
                        <i class="el-icon-s-home">首页</i>
                    </a>

                    <a href="user.html" style="text-decoration:none;color: white;position: absolute;font-size: 25px;top: 8px;
                            margin-left: 600px;" target="right">
                        <i class="el-icon-s-management">用户管理</i>
                    </a>

                    <a href="../pages/main.html" style="color: white; position: absolute; font-size: 25px;top: 8px;
                            margin-left: 750px;">
                        <i class="el-icon-s-check">加入我们</i>
                    </a>

                    <a @click="ABC = true" type="primary" style="color: white; position: absolute; font-size: 25px;top: 8px;cursor: pointer;
                            margin-left: 900px;">
                        <i class="el-icon-s-tools">修改信息</i>
                    </a>

                    <a href="../pages/VIP.html" target="_blank" style="color: white; position: absolute; font-size: 25px;top: 8px;
                            margin-left: 1050px;">
                        <i class="el-icon-shopping-cart-full">VIP[微信支付]</i>
                    </a>

                    <a href="../pages/alipayPage/alipay_index.html" target="_blank" style="color: white; position: absolute; font-size: 25px;top: 8px;
                            margin-left: 1250px;">
                        <i class="el-icon-shopping-cart-full">VIP[支付宝]</i>
                    </a>
                </a>

                <div class="right-menu" style="position: absolute">
                    <el-dropdown class="avatar-container right-menu-item" trigger="click">
                        <div class="avatar-wrapper">
                            <img :src="userInfoPO.image" class="user-avatar"
                                 style="width: 45px;
                                height: 45px;
                                vertical-align: top;
                                cursor: pointer;
                                margin-top: -12px;">
                            <span class="el-dropdown-link" style="
                                width: 200px;
                                color: rgb(240, 248, 255);
                                top: -10px;
                                font-size: 20px;
                                vertical-align: top;
                                cursor: pointer;
                                left: -270px;">
                            用户名:{{userInfoPO.username}}
                        </span>
                        </div>


                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <span><a href="../login.html">修改密码</a></span>
                            </el-dropdown-item>

                            <el-dropdown-item>
                                <span><a href="../login.html">退出</a></span>
                            </el-dropdown-item>

                            <el-dropdown-item>
                                <span><a href="../login.html">注册</a></span>
                            </el-dropdown-item>
                        </el-dropdown-menu>

                    </el-dropdown>
                </div>
            </nav>
        </el-header>

        <el-container>
            <el-aside width="270px" style="background-color: rgb(229,236,245)">
                <!--<el-menu :default-openeds="['1', '4']">-->

                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        active-text-color="#red">

                    <el-col :span="12" style="width: 100%;overflow: hidden">
                        <el-menu
                                default-active="4"
                                class="el-menu-vertical-demo"
                                @open="handleOpen"
                                @close="handleClose">
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-s-order"></i>
                                    <span style="font-size: 17px">EXCEL相关</span>
                                </template>
                                <el-menu-item-group class="itemCC">
                                    <el-menu-item index="1-1" style="font-size: 17px">
                                        <a class="itemA" href="MD5.html" style="text-decoration:none;" target="right">
                                            <i class="el-icon-video-camera-solid">EXCEL转SQL</i>
                                        </a>
                                    </el-menu-item>
                                    <el-menu-item class="item" index="1-2" style="font-size: 17px">
                                        <a class="itemA" href="user.html" style="text-decoration:none;" target="right">
                                            <i class="el-icon-s-home">EXCEL转JSON</i>
                                        </a>
                                    </el-menu-item>

                                    <el-menu-item index="1-3" style="font-size: 17px">
                                        <a class="itemA" href="MD5.html" style="text-decoration:none;" target="right">
                                            <i class="el-icon-picture">PDF转PNG</i>
                                        </a>
                                    </el-menu-item>

                                    <el-menu-item class="item" index="1-4" style="font-size: 17px">
                                        <a class="itemA" href="SQL.html" style="text-decoration:none;" target="right">
                                            <i class="el-icon-upload">SQL批量生成</i>
                                        </a>
                                    </el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>

                            <el-submenu index="2">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span style="font-size: 17px">加解密类</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item class="item" index="1-1" style="font-size: 17px">
                                        <a class="itemA" href="MD5.html" style="text-decoration:none;" target="right">
                                            <i class="el-icon-s-opportunity">MD5加解密</i>
                                        </a>
                                    </el-menu-item>
                                    <el-menu-item class="item" index="1-2" style="font-size: 17px">
                                        <a class="itemA" href="SM2.html" style="text-decoration:none;" target="right">
                                            <i class="el-icon-s-management">SM2加解密</i>
                                        </a>
                                    </el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>

                            <el-submenu index="3">
                                <template slot="title">
                                    <i class="el-icon-camera"></i>
                                    <span style="font-size: 17px">去水印</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item class="item" index="1-1" style="font-size: 17px">
                                        <a class="itemA" href="user.html" style="text-decoration:none;" target="right">
                                            <i class="el-icon-s-operation">视频去水印</i>
                                        </a>
                                    </el-menu-item>

                                    <el-menu-item class="item" index="1-2" style="font-size: 17px">
                                        <a class="itemA" href="user.html" style="text-decoration:none;" target="right">
                                            <i class="el-icon-s-help">图片去水印</i>
                                        </a>
                                    </el-menu-item>
                                    <el-menu-item class="item" index="1-3" style="font-size: 17px">
                                        <a class="itemA" href="user.html" style="text-decoration:none;" target="right">
                                            <i class="el-icon-s-flag">MP4提取音频</i>
                                        </a>
                                    </el-menu-item>

                                    <el-menu-item class="item" index="1-4" style="font-size: 17px">
                                        <a class="itemA" href="user.html" style="text-decoration:none;" target="right">
                                            <i class="el-icon-s-goods">证件照换底色</i>
                                        </a>
                                    </el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>

                            <el-submenu index="4">
                                <template slot="title">
                                    <i class="el-icon-s-ticket"></i>
                                    <span style="font-size: 17px">格式化工具</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="1-1" style="font-size: 17px">
                                        <a class="itemA" href="MD5.html" style="text-decoration:none;" target="right">
                                            <i class="el-icon-document">XML格式化</i>
                                        </a>
                                    </el-menu-item>

                                    <el-menu-item index="1-2" style="font-size: 17px">
                                        <a class="itemA" href="MD5.html" style="text-decoration:none;" target="right">
                                            <i class="el-icon-s-cooperation">JSON格式化</i>
                                        </a>
                                    </el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>

                            <el-submenu index="5">
                                <template slot="title">
                                    <i class="el-icon-document"></i>
                                    <span style="font-size: 17px">其它</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item class="item" index="1-1" style="font-size: 17px">
                                        <a class="itemA" href="MD5.html" style="text-decoration:none;" target="right">
                                            <i class="el-icon-s-platform">UUID生成</i>
                                        </a>
                                    </el-menu-item>

                                    <el-menu-item index="1-2" style="font-size: 17px">
                                        <i class="el-icon-apple">时间戳转换</i>
                                    </el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                        </el-menu>
                    </el-col>


                </el-menu>
            </el-aside>
            <el-container>
                <iframe name="right"
                        id="iframe"
                        class="el-main"
                        src="welcome.html"
                        width="1700px"
                        height="900px"
                        frameborder="0">
                </iframe>
            </el-container>
        </el-container>
    </el-container>

    <el-drawer
            title="我是标题"
            :append-to-body="true"
            :visible.sync="ABC"
            :with-header="false">

        <el-container>
            <el-header style="height: 135px;background: bottom;background-repeat:no-repeat;background: #d9d9d9;">

                <span style="position: absolute;top: 40px;left: 150px;">粉丝:{{userInfoPO.fansNumber}}</span>
                <span style="position: absolute;top: 80px;left: 150px;">关注:{{userInfoPO.f0llowNumber}}</span>

                <img :src="userInfoPO.image" class="user-avatar"
                     style="width: 120px;
                                height: 120px;
                                border-radius: 60px;
                                vertical-align: top;
                                border-width: 1px;
                                cursor: pointer;
                                margin-left: 210px;
                                border-style: groove;
                                margin-top: 10px;">
                <span v-if="userInfoPO.sex == '0'"><i class="el-icon-male" style="font-size: 30px;padding: 10px;color: #0b58a2"></i></span>
                <span v-if="userInfoPO.sex == '1'"><i class="el-icon-female" style="font-size: 30px;padding: 10px;color: #ff6868"></i></span>
                <span v-if="userInfoPO.isFans == '0'" style="position: absolute;top: 90px;right: 170px;"><i class="el-icon-circle-plus" style="font-size: 25px;color: #3d85bb">关注</i></span>
                <span v-if="userInfoPO.isFans == '1'" style="position: absolute;top: 90px;right: 170px;"><i class="el-icon-remove" style="font-size: 25px;color: #ff6868">取关</i></span>
            </el-header>
            <el-main>
                <div style="margin-left: 170px;padding-bottom: 20px;">永远相信美好的事情即将发生！</div>
                <el-form name="userInfoPO"
                         :model="sqlExcute"
                         :rules="rules"
                         style="margin-left: -140px"
                         ref="userInfoPO"
                         label-width="200px"
                         class="demo-ruleForm">
                    <el-form-item label="用户名" prop="name" style="width: 600px">
                        <el-input v-model="userInfoPO.username"></el-input>
                    </el-form-item>

                    <el-form-item label="姓名" prop="name" style="width: 600px">
                        <el-input v-model="userInfoPO.name"></el-input>
                    </el-form-item>

                    <el-form-item label="手机号" prop="name" style="width: 600px">
                        <el-input v-model="userInfoPO.phone" placeholder="[英文逗号“,”分割,例如:'字段1','字段2']可为空"></el-input>
                    </el-form-item>

                    <el-form-item label="国家" prop="name" style="width: 600px">
                        <el-input v-model="userInfoPO.country" placeholder="[英文逗号“,”分割,例如:'字段1','字段2']可为空"></el-input>
                    </el-form-item>

                    <el-form-item label="城市" prop="name" style="width: 600px">
                        <el-input v-model="userInfoPO.city" placeholder="[英文逗号“,”分割,例如:'字段1','字段2']可为空"></el-input>
                    </el-form-item>

                    <el-form-item label="性别" prop="resource">
                        <el-radio-group v-model="userInfoPO.sex">
                            <el-radio-button label="男"></el-radio-button>
                            <el-radio-button label="女"></el-radio-button>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="updateInfo('userInfoPO')">更新信息</el-button>
                    </el-form-item>
                </el-form>
            </el-main>
        </el-container>
    </el-drawer>

    <div class="layui-col-md12 ">
        <div style="text-align: center">
            <i class="fa fa-qq fa-3x" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <i class="fa fa-weixin fa-3x" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <i class="fa fa-twitter fa-3x" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <i class="fa fa-firefox fa-3x" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <i class="fa fa-github fa-3x" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <i class="fa fa-linux fa-3x" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <i class="fa fa-facebook-official fa-3x" aria-hidden="true"></i>
            <p style="font-size: 20px">技术支持，特别鸣谢</p>
        </div>
    </div>
</div>

</body>
<!-- 引入组件库 -->
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/vue.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<!--<script src="../plugins/elementui/index.js"></script>-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    new Vue({
        el: '#app',
        data: {
            userInfoPO: {
                // image: '../imgs/header-001.png',
                image: '../imgs/avatar2.png',
                username: '李宏林',
                nickname: 'JOJO的奇妙冒险',
                phone: '173****0897',
                name: '王小虎',
                city: '城市',
                sex: '0',
                isFans: '1',
                fansNumber: '89',
                f0llowNumber: '72',
                country: '上海市普陀区金沙江路 1518',
            },
            drawerTab: false,
            ABC: false,
        },
        created() {
            this.localUserInfo();
            // this.userInfoPO = window.localStorage.getItem("userInfoPO");
            this.getUserInfoAll();
            this.getHeaderImgFile();
        },
        methods: {
            localUserInfo() {
                //发送Ajax请求，请求获取当前登录用户的用户名
                axios.get("/user/login/localUserInfo").then((response) => {
                    if (response.data.flag) {
                        this.userInfoPO = response.data.data;
                    }
                });
            },
            getHeaderImgFile() {
                //发送Ajax请求，请求获取当前登录用户的用户名
                axios.get("/utils/random/getHeaderImgFile").then((response) => {
                    if (response.data.flag) {
                        this.userInfoPO.image = response.data.data;
                    }
                });
            },
            getUserInfoAll() {
                axios.post("/user/login/getUserInfoAll").then((response) => {
                    if (response.data.flag) {
                        this.tableData = response.data.data[0];
                    }
                });
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    });

    $(function () {
        var wd = 200;
        $(".el-main").css('width', $('body').width() - wd + 'px');
    });

    //响应式页面实现根据浏览器的窗口大小变化
    window.onresize = function () {
        var wd = 200;
        $(".el-main").css("width", $("body").width() - "px");
    };

    $(".itemCC ul").on("click", "li", function () {
        $(".itemCC ul li").removeClass("active");
        $(this).addClass("active");
    });
</script>

</html>
